<template>
  <div>
    <el-form ref="form" :model="formData" :label-width="labelWidth">
      <el-form-item
        v-for="item in formItem"
        :key="item.prop"
        :label="item.label"
        :prop="item.prop"
        :rules="item.rules"
      >
        <!-- Input-->
        <el-input
          v-if="item.type === 'Input'"
          v-model.trim="formData[item.prop]"
          :placeholder="item.placeholder"
          :style="{ width: item.width }"
          :disabled="item.disabled"
        ></el-input>
        <!-- Input textarea-->
        <el-input
          type="textarea"
          :rows="item.rows || 5"
          v-if="item.type === 'Textarea'"
          v-model.trim="formData[item.prop]"
          :placeholder="item.placeholder"
          :style="{ width: item.width }"
          :disabled="item.disabled"
        ></el-input>
        <!-- Select-->
        <el-select
          filterable
          v-if="item.type === 'Select'"
          :aaaa="item.options"
          v-model.trim="formData[item.prop]"
          :placeholder="item.placeholder"
          :style="{ width: item.width }"
          :disabled="item.disabled"
        >
          <el-option
            v-for="selectItem in item.options"
            :key="selectItem.value || selectItem[item.select_vlaue]"
            :value="selectItem.value || selectItem[item.select_vlaue]"
            :label="selectItem.label || selectItem[item.select_label]"
          ></el-option>
        </el-select>
        <!-- 禁启用 -->
        <el-radio-group
          v-if="item.type === 'Disabled'"
          v-model="formData[item.prop]"
        >
          <el-radio
            v-for="radio in radio_disabled"
            :label="radio.value"
            :key="radio.value"
            >{{ radio.label }}</el-radio
          >
        </el-radio-group>
        <!-- 单选 -->
        <el-radio-group
          v-if="item.type === 'Radio'"
          v-model="formData[item.prop]"
        >
          <el-radio
            v-for="radio in item.options"
            :label="radio.value"
            :key="radio.value"
            >{{ radio.label }}</el-radio
          >
        </el-radio-group>
        <!-- slot -->
        <slot v-if="item.type === 'Slot'" :name="item.slotName" />
        <!-- 富文本编辑器 -->
        <!-- <template v-if="item.type === 'Wangeditor'">
          <Wangeditor
            :isClear="wangeditorClear"
            ref="wangeditor"
            :value="formData[item.prop]"
            :content.sync="formData[item.prop]"
          />
        </template> -->
        <!-- 文件上传 -->
        <template v-if="item.type === 'Upload'">
          <!-- <Upload
            :imgUrl="formData[item.prop]"
            :value.sync="formData[item.prop]"
            :requestFlag="item.requestFlag"
          /> -->
        </template>
      </el-form-item>
      <!-- 按钮 -->
      <el-form-item>
        <el-button
          v-for="item in formHandler"
          :key="item.key"
          :type="item.type"
          @click="item.handler && item.handler()"
        >
          {{ item.label }}
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  // upload
  import Upload from "@c/upload"
  export default {
    name: "",
    components: { Upload },
    props: {
      labelWidth: {
        type: String,
        default: "120px",
      },
      formData: {
        type: Object,
        default: () => {},
      },
      formItem: {
        type: Array,
        default: () => [],
      },
      // 按钮
      formHandler: {
        type: Array,
        default: () => [],
      },
    },
    data() {
      return {
        form_data: {
          parkingId: "", //停车场
          carsBrandId: "", //车辆品牌
          carsMode: "", //车辆型号
          carsNumber: "", //车牌号
          carsFrameNumber: "", //车架号
          engineNumber: "", //发动机号
          carsImg: "", //缩略图
          countKm: "", //可行驶公里
          yearCheck: true, //年检
          gear: 1, //档位
          energyType: 2, //能源类型
          electric: 100, //电量
          oil: 100, //油量
          carsAttr: "", //车辆属性
          content: "", //车辆描述
          maintainDate: "", //保养日期
          status: true, //禁启用
        },
        // 禁启用数据
        radio_disabled: this.$store.state.config.radio_disabled,
        // 表单验证提示
        type_msg: {
          Input: "请输入",
          InputNumber: "请输入",
          Radio: "请选择",
          Select: "请选择",
          Disabled: "请选择",
          Upload: "请上传",
        },
      }
    },
    methods: {
      initFormData() {
        this.formItem.forEach((item) => {
          // console.log(item)
          // 验证规则
          if (item.required) {
            this.rules(item)
          }
          // 自定义检验规则
          if (item.validator) {
            item.rules = item.validator
          }
        })
      },
      // 表单验证规则
      rules(item) {
        const requiredRules = [
          {
            required: true,
            message: `${this.type_msg[item.type]}${item.label}`,
            trigger: "change",
          },
        ]
        // console.log(item)
        // 其他的 rules 规则 concat（）方法是用于连接两个或多个数组
        if (item.rules && item.rules.length > 0) {
          item.rules = requiredRules.concat(item.rules)
        } else {
          item.rules = requiredRules
        }
      },
    },
    watch: {
      // 监听返回数据 加验证规则处理
      formItme: {
        handler(newValue) {
          this.initFormData()
        },
        immediate: true,
      },
    },
  }
</script>
<style lang='scss'></style>